<template>
    <div class="background">
      <a-card style="margin-bottom: 10px">
        <a-row>
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="敏感词">
                <a-input
                  allow-clear
                  placeholder="请输入敏感词"
                  v-model="sensitiveWord"
                ></a-input>
              </a-form-item>
  
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
                <a-button
                  type="primary"
                  style="margin-left: 10px"
                  @click="add('')"
                >新增</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
      <a-card>
        <a-table
          bordered
          :loading="loading"
          :columns="columns"
          :data-source="dataSource"
          :scroll="{ x: true }"
          :pagination="pagination"
          @change="handleTableChange"
        >
  
          <template
            slot="action"
            slot-scope="txt, record"
          >
            <a
              class="mr-10"
              @click="add(record)"
            >
              <a-icon type="edit" />编辑
            </a>
            <a
              class="mr-10"
              @click="deleteRecord(record)"
            >
              <a-icon type="delete" />删除
            </a>
          </template>
        </a-table>
        <create
          v-if="showAdd"
          :group="group"
          @close="close"
        ></create>
      </a-card>
    </div>
  </template>
  
  <script>
  import create from './create.vue'
  import { postAction } from '@/api/manage'
  import { pattern } from '@api/pattern/index'
  const columns = [
    {
      title: '敏感词',
      dataIndex: 'sensitiveWord'
    },
    {
      title: '操作',
      width: 130,
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    components: {
      create
    },
    data() {
      return {
        columns,
        form: this.$form.createForm(this),
        showAdd: false,
        group: '',
        sensitiveWord: '',
        loading: false,
        dataSource: [],
        pagination: {
          total: 0,
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '40'],
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: total => `共 ${total} 条记录`,
          itemRender: (current, type, originalElement) => {
            if (type === 'prev') {
              return <a>上一页</a>
            } else if (type === 'next') {
              return <a>下一页</a>
            }
            return originalElement
          }
        }
      }
    },
    computed: {
      jobNumber() {
        return this.$store.getters.userInfo.workNo || ''
      }
    },
    mounted() {
      this.loadData()
    },
  
    methods: {
      close() {
        this.showAdd = false
        this.loadData(1)
      },
      add(record) {
        this.showAdd = true
        this.group = record
      },
      handleTableChange(pagination) {
        this.pagination = pagination
        this.loadData(1)
      },
      deleteRecord(record) {
        this.$confirm({
          content: '确定要删除' + record.sensitiveWord + '敏感词吗？',
          onOk: () => {
            const data = {
              sensitiveWordId: record.sensitiveWordId,
              jobNumber: this.jobNumber
            }
            postAction(`${pattern}sensitiveword/delete`, data).then(data => {
              if (data.code == 200) {
                this.$message.success('删除成功')
                this.loadData()
              } else {
                this.$message.warning(data.msg)
              }
            })
          },
          onCancel() {}
        })
      },
      selectChange(brand) {
        this.brand = brand
      },
      handleSubmit(e) {
        e.preventDefault()
        this.loadData()
      },
      loadData(key) {
        this.loading = true
        const params = {
          size: this.pagination.pageSize
        }
        if (key) {
          params.current = this.pagination.current
        } else {
          params.current = 1
        }
        if (this.sensitiveWord) {
          params.sensitiveWord = this.sensitiveWord
        }
        postAction(`${pattern}sensitiveword/page`, params).then(data => {
          if (data.code == 200) {
            this.dataSource = data.data.records
            this.pagination.total = data.data.total
            this.pagination.current = data.data.current
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .background {
    background: transparent;
  }
  .ant-modal-body {
    display: flex;
    justify-content: space-between;
  }
  </style>